<template>
    <div class="content">
     <el-form :inline="true" style="margin-left: 80px;">
      <el-form-item label="关键词">
        <el-input v-model="form.keyword" placeholder="请输入关键词" clearable />
      </el-form-item>
      <el-form-item style="margin-left: 900px;">
        <el-button type="primary" icon="Search" class="operate-btn" @click="queryTags">查询</el-button>
        <el-button type="success" icon="Plus" class="operate-btn" @click="addTag">新增</el-button>
      </el-form-item>
     </el-form>
     <el-table
        :data="tableData"
        style="width: 90%; margin: 0 auto; height: 305px;"
        border
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        highlight-current-row
        :row-class-name="rowClassName"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="150"/>
        <el-table-column prop="name" label="标签名" width="200">
          <template #default="scope">
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200"/>
        <el-table-column prop="updateTime" label="更新时间" width="200"/>
        <el-table-column prop="status" label="状态" width="150"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" icon="Edit" class="operate-btn" plain @click="edit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" icon="Delete" class="operate-btn" plain @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="form.page"
        v-model:page-size="form.size"
        :page-sizes="[1, 3, 5, 10]"
        :disabled="false"
        background
        layout="sizes, prev, pager, next, jumper, total"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin-top: 30px; align-self: center"
      />

      <Drawer v-if="drawerStore.tagDrawer === true"></Drawer>
      <Dialog v-if="drawerStore.tagDialog === true"></Dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Drawer from '@/views/Admin/tags/components/index.vue';
import Dialog from './components/dialog.vue';
import { useDrawerStore } from '@/stores/drawer';
import { fetchTags, deleteTag } from '@/apis/admin/tags';
import type { TagItem } from '@/types/admin/tag';

const drawerStore = useDrawerStore()
const form = ref({
  page: 1,
  size: 5,
  keyword: ''
})

const tableData = ref([])

const headerCellStyle = {
  'background-color': 'rgb(61, 141, 253)',
  'color': 'white',
  'font-weight': 'bold',
  'text-align': 'center',
  'font-size': '17px',
  'height': '65px',
  'border': 'none'
}

const rowStyle = {
  'height': '60px'
}

const cellStyle = {
  'text-align': 'center',
  'vertical-align': 'middle'
}

const rowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
}

async function queryTags(){
  const res = await fetchTags(form.value);
  console.log('fetchTags返回值:', res);
  tableData.value = res.data.records;
}

function addTag(){
  drawerStore.tagDialog = true
}

const handleSizeChange = (val: number) => {
  form.value.size = val;
}

const handleCurrentChange = (val: number) => {
  form.value.page = val;
}

function edit(row: TagItem){
  drawerStore.tagRow = row;
  drawerStore.tagDrawer = true
}

async function deleteRow(row: any){
  await deleteTag(row.id);
}

onMounted(() => {
  queryTags();
});
</script>

<style scoped>

</style>
